<template>
  <div class="page">
    <global-header title="房间信息" @back="$router.back()" />
    <main class="page-main">
      <van-cell-group>
        <van-cell title="头像设置" is-link @click="handleShowEditAvatar">
          <template #value>
            <div class="w-full h-[57px] flex justify-end">
              <van-image
                class="!w-[57px] !h-[57px] !rounded-[57px] overflow-hidden"
                :src="netAvatar(roomInfo?.SysImg)"
              />
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <div class="h-[10px]"></div>
      <van-cell-group>
        <van-cell
          title="房间名字"
          is-link
          :value="roomInfo?.RoomNickname"
          @click="handleShowPopup('房间名字', 'RoomNickname')"
        />
        <van-cell
          title="房间昵称"
          is-link
          :value="roomInfo?.ChatNickname"
          @click="handleShowPopup('房间昵称', 'ChatNickname')"
        />
        <van-cell title="修改密码" is-link @click="handleShowEditPass" />
        <!-- <van-cell title="通知铃声" is-link /> -->
      </van-cell-group>
    </main>
    <RoomSettingPopup
      :title="settingData.title"
      :keyName="settingData.keyName"
      :keyValue="settingData.keyValue"
      ref="settingPopupRef"
    />
    <EditPasswordPopup ref="editPasswordPopupRef" />
    <EditAvatarPopup ref="editAvatarPopupRef" />
  </div>
</template>
<route>
  {
    name: "admin-setting-basis",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import RoomSettingPopup from "@/components/room-setting-popup.vue";
import EditPasswordPopup from "./components/edit-password-popup.vue";
import EditAvatarPopup from "./components/edit-avatar-popup.vue";

import { useRoomStore } from "@/store/modules/room";
import { netAvatar } from "@/utils/common";
import { storeToRefs } from "pinia";

type SettingData = {
  title: string;
  keyName: BasisConfigKeys;
  keyValue: number | string | null;
};

const settingPopupRef = ref();
const editPasswordPopupRef = ref();
const editAvatarPopupRef = ref();
const roomStore = useRoomStore();
const { roomInfo } = storeToRefs(roomStore);
const settingData = reactive<SettingData>({
  title: "",
  keyName: <BasisConfigKeys>"ChatNickname",
  keyValue: ""
});

const handleShowPopup = (title: string, keyName: BasisConfigKeys) => {
  settingData.title = title;
  settingData.keyName = keyName;
  settingData.keyValue = roomInfo.value![keyName];
  nextTick(() => {
    settingPopupRef.value?.open();
  });
};

const handleShowEditPass = () => {
  editPasswordPopupRef.value?.open();
};

const handleShowEditAvatar = () => {
  editAvatarPopupRef.value?.open();
};
</script>
<style scoped lang="scss">
.page-main {
  :deep() {
    .van-cell {
      align-items: center;
      .van-cell__title {
        flex: 1.5;
      }
      .van-icon-arrow {
        font-size: 12px;
      }
    }
  }
}
</style>
